<script setup>

import * as api from "@/api/v-wkf-service/flow-test.js";

/**
 * 定义emit事件
 */
const emits = defineEmits([
  'query',
])

/**
 * 定义props 属性
 */
const props = defineProps({
  formJson: {
    type: Object,
    default: () => [],
  },
  paramObj: {
    type: Object,
    default: () => {
    },
  }
})

const jsonMap = ref({})

const formData = ref({
  id: '',
  processStatus: '',
  processInstanceId: '',
  handoverPerson: '',
  supervisor: '',
  transferor: '',
  transferorTxt: '',
  supervisorTxt: '',
  handoverPersonTxt: '',
  orgId: '',
  orgIdTxt: '',
  postId: '',
  postIdTxt: '',
  personCode: '',
  deptId: '',
  deptIdTxt: '',
  handoverContent: '',
  companyAssetsContent: '',
})

const rules = ref({
  transferor: [{required: true, message: "移交人不能为空", trigger: "blur"},],
  supervisor: [{required: true, message: "监交人不能为空", trigger: "blur"},],
  handoverPerson: [{required: true, message: "交接人不能为空", trigger: "blur"},],
  companyAssetsContent: [{required: true, message: "公司资产内容必填", trigger: "blur"},],
  content: [{required: true, message: "内容描述必填", trigger: "blur"},],
})

const formRef = ref()

//选人
const fn_showSelectPerson = (peopleField) => {
  if (jsonMap.value[peopleField].edit){
    formData.value[peopleField] = 3
    formData.value[peopleField + 'Txt'] = '测试'
  }
}

// 初始化表单项权限
const init_FormJson = () => {
  if (props.formJson && props.formJson.length !== 0) {
    props.formJson.forEach(item => {
      let key = item.id
      jsonMap.value[key] = item
    })
  }
}

// 初始化代码集
const init_Cache = () => {

}

// 初始化数据详情
const init_ProcessInfo = async () => {
  if (jsonMap.value && jsonMap.value.id && jsonMap.value.id.value) {
    const { code, data } = await api.getProcessInfo(jsonMap.value.id.value)
    if (code === 200) {
      formData.value = data
    }
  }
}

// 初始化表单
const init_Form = () => {
  if (!jsonMap.value.id || !formData.value.id) {

  }
}

const tempSave = () => {
  // return new Promise(async (resolve, reject) => {
  //   let params = {
  //     formData: formData.value,
  //   }
  //   const {code} = await api.create(params)
  //   if (code === 200) {
  //     resolve(true)
  //   }
  // })
}

const startProcess = (processData) => {
  return new Promise((resolve, reject) => {
    let params = {
      ...processData,
      formData: formData.value,
    }
    formRef.value.validate(async (valid,error) => {
      if (valid) {
        const { code } = await api.create(params)
        if (code === 200){
          resolve(true)
        }
      }else {
        ElMessage({ message: '请检查必填项', type: 'error'})
        reject(false)
      }
    })
  })
}

const passProcess = (processData) => {
  return new Promise((resolve, reject) => {
    let params = {
      ...processData,
      formData: formData.value,
    }
    formRef.value.validate(async (valid,error) => {
      if (valid) {
        const { code } = await api.pass(params)
        if (code === 200){
          resolve(true)
        }
      }else {
        ElMessage({ message: '请检查必填项', type: 'error'})
        reject(false)
      }
    })
  })
}

const refuseProcess = (processData) => {
  return new Promise((resolve, reject) => {
    let params = {
      ...processData,
      formData: formData.value,
    }
    formRef.value.validate(async (valid,error) => {
      if (valid) {
        const { code } = await api.refuse(params)
        if (code === 200){
          resolve(true)
        }
      }else {
        ElMessage({ message: '请检查必填项', type: 'error'})
        reject(false)
      }
    })
  })
}

const init = () => {
  init_FormJson()
  init_Cache()
  init_ProcessInfo()
  init_Form()
}

onMounted(()=>{
  init()
})

/**
 * 组件对外提供可访问数据
 */
defineExpose({
  tempSave,
  startProcess,
  passProcess,
  refuseProcess,
})

</script>

<template>
  <div>
    <div class="elDividerBox">
      <span class="line"></span>
      <span class="text">工作交接书</span>
      <span class="line"></span>
    </div>
    <el-form :model="formData" :rules="rules" ref="formRef" label-width="170px">

      <el-row :gutter="20">
        <el-col :span="12" v-if="jsonMap['transferor'] && jsonMap['transferor'].read">
          <el-form-item label-width="100px" label="移交人" prop="transferor">
            <el-input :disabled="!jsonMap['transferor'].edit" @click="fn_showSelectPerson('transferor')" v-model="formData.transferorTxt" placeholder="点击选择移交人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['handoverPerson'] && jsonMap['handoverPerson'].read">
          <el-form-item label-width="100px" label="接交人" prop="handoverPerson">
            <el-input :disabled="!jsonMap['handoverPerson'].edit" @click="fn_showSelectPerson('handoverPerson')" v-model="formData.handoverPersonTxt" placeholder="点击选择接交人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['supervisor'] && jsonMap['supervisor'].read">
          <el-form-item label-width="100px" label="监交人" prop="supervisor">
            <el-input :disabled="!jsonMap['supervisor'].edit" @click="fn_showSelectPerson('supervisor')" v-model="formData.supervisorTxt" placeholder="点击选择监交人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['orgId'] && jsonMap['orgId'].read">
          <el-form-item label-width="100px" label="公司名称">
            <el-input :disabled="!jsonMap['orgId'].edit" v-model="formData.orgIdTxt" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['postId'] && jsonMap['postId'].read">
          <el-form-item label-width="100px" label="任职岗位">
            <el-input :disabled="!jsonMap['postId'].edit" v-model="formData.postIdTxt" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['personCode'] && jsonMap['personCode'].read">
          <el-form-item label-width="100px" label="工号">
            <el-input :disabled="!jsonMap['personCode'].edit" v-model="formData.personCode" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['deptId'] && jsonMap['deptId'].read">
          <el-form-item label-width="100px" label="任职团队">
            <el-input :disabled="!jsonMap['deptId'].edit" v-model="formData.deptIdTxt" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['handoverContent'] && jsonMap['handoverContent'].read">
          <el-form-item label-width="100px" label="交接内容">
            <el-input :disabled="!jsonMap['handoverContent'].edit" v-model="formData.handoverContent" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="jsonMap['companyAssetsContent'] && jsonMap['companyAssetsContent'].read">
          <el-form-item label-width="100px" label="公司资产内容">
            <el-input :disabled="!jsonMap['companyAssetsContent'].edit" v-model="formData.companyAssetsContent" placeholder="自动带出"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.elDividerBox {
  .line {
    width: calc(50% - 55px);
  }

  .text {
    width: 180px;
    text-align: center;
  }
}
</style>